<template>
  <div>
    <article class="my-article" v-for="(item, index) in items">
      <v-card hover>
        <v-card-title primary-title>
          <div class="text-xs-left">
            <h2 class="headline mb-3">
              <router-link :to="'/blog/article/'+item.id">
              {{item.title}}
              </router-link>
            </h2>
            <div class="article-info">
              <span>
                <v-icon>person</v-icon>
                shanjunpeng
              </span>
              <span>
                <v-icon>query_builder</v-icon>
                {{item.ctime | formatDate}}
              </span>
              <span>
                <v-icon>folder_open</v-icon>
                {{item.category || '无分类'}}
              </span>
            </div>
          </div>
        </v-card-title>
        <v-card-title>
          <section class="markdown-body article-start text-md-left mb-2" v-html="item.start">
          </section>

          <v-btn class="read-detail" color="secondary" @click="handleArticleClick(item.id)">
            <v-icon>import_contacts</v-icon>
            &nbsp;&nbsp;&nbsp;阅读全文
          </v-btn>
        </v-card-title>

        <v-card-actions>
          <!--<v-btn flat color="orange">Share</v-btn>-->
          <!--<v-btn flat color="orange">Explore</v-btn>-->
        </v-card-actions>
      </v-card>
    </article>
    <mavon-editor style="display: none"></mavon-editor>
  </div>
</template>
<script type="text/ecmascript-6">
  import {pageList} from "@/api/article";

  export default {
    data() {
      return {
        query: {
          page: 1,
          size: 20
        },
        items: [],
        prop: {
          subfield: false,// 单双栏模式
          defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
          editable: false,
          toolbarsFlag: false,
          scrollStyle: false
        }
      }
    },
    beforeMount() {
      this.getList();
    },
    methods: {
      getList() {
        pageList(this.query).then(data => {
          const list = data.content;

          list.forEach(item => {
            const arr = item.content.split('\n\n');
            const idx = arr.length > 3 ? 3 : arr.length;
            const txt = arr.slice(0, idx).join('\n\n');
            item.start = this.$markdownIt.render(txt);
          });
          this.items = list;
        })
      },
      handleArticleClick(id) {
        this.$router.push({path: '/blog/article/' + id})
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
